<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_379791_2cyjes73tt5fusor.css">
    <title>会员</title>
    <style>
body,ul{margin:0;padding:0}
body{font-size:12px}
li{list-style:none}
a{text-decoration:none}
body,html{font-family:'Helvetica Neue',Helvetica,Arial,'Microsoft Yahei','Hiragino Sans GB','Heiti SC','WenQuanYi Micro Hei',sans-serif!important;width:100%;height:100%}
.left{float:left}
.right{float:right}
.tab-content{height:60px;display:flex;align-items:center;justify-content:center;}
.tab{flex:1;height:46px;display:flex;align-items:center;justify-content:center;}
.active{color:#972fff;position:relative;}
.active::before{content:"";position:absolute;bottom:10px;height:2px;width:60%;left:50%;margin-left:-30%;display:inline-block;background:#972fff;}
.header-area{position:relative;text-align:center}
.content{position:relative;width:60%;height:220px;margin:0 auto;background:url(./images/content-1.png) no-repeat center 200%}
.content p{margin:5px 0}
.p-name{font-size:14px}
.content img{width:100px;height:100px;margin-top:20px;border:1px solid #fff;border-radius:50%}
.bar{line-height:5px;width:200px;height:5px;margin:0 auto;background:#e9d2ff}
.experience{width:0px;height:inherit;background:#972fff}
.content-experience{position:relative;width:200px;margin:0 auto;color:rgba(255,255,255,.9)}
.content-experience .iconfont{font-size:12px}
.content-grade:before{font-size:12px;color:#ecf10a}
.content-grade{position:absolute;bottom:-15px;left:0}
.content-percentage{position:absolute;right:0;bottom:-15px}
.content-percentage::after{content:'\e609';color:#ecf10a}
.grade-area{text-align:center}
.grade-area h3{color:#972fff}
.grade-content{display:-webkit-flex;flex-direction:column;padding:5px;background-color:#f9f9f9}
.content-top{display:-webkit-flex;flex-direction:row;flex:1}
.content-top .module{padding:5px;flex:1}
.content-top .module > div{padding:20px 0;box-shadow:0 8px 15px rgba(0,0,0,.1),0 0 1px rgba(0,0,0,.1) inset}
.content-bottom{display:-webkit-flex;flex-direction:row;margin-top:20px;flex:1}
.content-bottom .module{padding:5px;flex:1}
.content-bottom .module > div{padding:20px 0;box-shadow:0 8px 15px rgba(0,0,0,.1),0 0 1px rgba(0,0,0,.1) inset}
.grade-content p{margin:10px 0 3px;color:#bcbcbc}
.content-top p{color:#232323}
.content-bottom p{color:#232323}
.grade-content span{padding:1px 15px 0;color:#bcbcbc;border:1px solid #bcbcbc;border-radius:3px}
.img-out{display:-webkit-flex;width:60px;height:60px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,#fe9893,#fc437d);align-items:center;justify-content:center;}
.img-active{filter:grayscale(100%);}
.img-out:before{font-size:2em;width:32px;height:32px;color:#fff}
.a_gradient{background:linear-gradient(135deg,#f8fbb9,#e6f110)}
.b_gradient{background:linear-gradient(135deg,#bcfbfc,#23f0f5)}
.c_gradient{background:linear-gradient(135deg,#b0b0ff,#4a4aff)}
.d_gradient{background:linear-gradient(135deg,#fcefb4,#f5d127)}
.f_gradient{background:linear-gradient(135deg,#d0a2ff,#9224ff)}
.upgrade-area h3{text-align:center;color:#972fff}
.upgrade-content li{font-size:14px;display:-webkit-flex;flex-direction:row;padding:5px;text-align:left}
.upgrade-content .icon{display:-webkit-flex;padding:3px 3px 12px;border-bottom:1px solid #dbdbdb;align-items:center;justify-content:center;flex:1}
.upgrade-content .upgrade-text{position:relative;padding:0 3px 12px 0;border-bottom:1px solid #dbdbdb;flex:6}
.icon:before{font-size:2em;width:32px;height:32px;color:#972fff}
.upgrade-content .last-none{border-bottom:none}
.upgrade-content li span{font-size:12px;position:absolute;bottom:8px;left:0;color:#dbdbdb}
</style>
</head>
<body>
    <hidel id="currentExp" value="@{${currentExp}}"></hidel>
    <hidel id="nexLvExp" value="@{${nexLvExp}}"></hidel>
    <div class="tab-content">
        <div class="tab active">
            用户等级
        </div>
        <div class="tab">
            主播等级
        </div>
    </div>
    <div class="header-area">
        <div class="content">
            <img src="images/zhuomian.jpg">
            <p style="color: rgba(255,255,255,0.8);">Lv6</p> 
            <p class="p-name">这是我的地盘</p>
            <p>还需要<span>100</span>经验值升到<span>Lv7</span></p>
            <div class="content-experience">
                <div id="bar"class="bar">
                    <div id="experience" class="experience"></div>
                </div>
                <span class="iconfont icon-dengji content-grade">Lv1</span><span class="content-percentage iconfont">50%</span>
            </div>
        </div>
    </div>
    <div class="grade-area">
        <h3>--&nbsp;&nbsp;等级特权&nbsp;&nbsp;--</h3>
        <div class="grade-content">

            <div class="content-top">
             <div class="module">
              <div>
                <div class="img-out a_gradient">
                 <img src="images/icon/huanying.png">
             </div>
             <p>欢迎进场</p>
             <span>LV20开启</span>
         </div>
     </div>
     <div class="module">
        <div>
            <div class="img-out b_gradient">
                <img src="images/icon/gift.png">
            </div>
            <p>道具礼包</p>
            <span>LV40开启</span>

        </div>            
    </div>
    <div class="module">
        <div>
            <div class="img-out c_gradient">
                <img src="images/icon/baoxiang.png">
            </div>
            <p>神秘宝箱</p>
            <span>LV60开启</span>

        </div>           
    </div>
</div>
<div class="content-bottom">
    <div class="module">
        <div>
            <div class="img-out d_gradient">
                <img src="images/icon/baoshijie.png">
            </div>
            <p>荣耀坐骑</p>
            <span>LV80开启</span>

        </div>         
    </div>
    <div class="module">
        <div>
            <div class="img-out e_gradient">
                <img src="images/icon/che.png">
            </div>
            <p>超管车队</p>
            <span>LV100开启</span>
        </div>
    </div>
    <div class="module">
        <div>
            <div class="img-out f_gradient iconfont icon-huangguan">

            </div>
            <p>欢定制进场效果</p>
            <span>LV120开启</span>
        </div>
    </div>
</div>
<p>更多特权 &nbsp;&nbsp;&nbsp;&nbsp;尽请期待</p>
</div>
</div>
<div class="upgrade-area">
    <h3>--&nbsp;快速升级小提示&nbsp;--</h3>
    <div class="upgrade-content">
        <ul>
            <li>
                <div class="icon iconfont icon-liwu1"></div>
                <div class="upgrade-text">
                    <div>赠送礼品</div>
                    <span>礼物刷起来，经验飞快涨</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-renwu"></div>
                <div class="upgrade-text">
                    <div>去做任务</div>
                    <span>去做任务，经验呼呼的</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-qiandao"></div>
                <div class="upgrade-text">
                    <div>天天签到</div>
                    <span>经验再少也是经验啊</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-dingzhi1"></div>
                <div class="upgrade-text">
                    <div>定制礼品</div>
                    <span>定制的最牛逼</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-zuanshi"></div>
                <div class="upgrade-text">
                    <div>成为贵族</div>
                    <span>我是贵族，还怕没经验</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-dingzhijiaoyi"></div>
                <div class="upgrade-text">
                    <div>定制法拉利</div>
                    <span>赠送法拉利,经验飞快涨</span>
                </div>
            </li>
            <li>
                <div class="icon iconfont icon-youting"></div>
                <div class="upgrade-text">
                    <div >赠送游艇</div>
                    <span>听说送法拉利挺厉害</span>
                </div>
            </li>
            <li>
                <div class="icon last-none iconfont icon-fenxiang"></div>
                <div class="upgrade-text last-none">
                    <div>分享直播</div>
                    <span>分享也能涨经验啊</span>
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
/**
 * [runExperience description]
 * @param  currExper 当前经验值
 * @param  total     升级需要的经验值
 * @param  elemWidth 元素宽度
 * @return         
 */
 $(function(){
    var currentExp=parseInt($("#currentExp").val());
    var nexLvExp=parseInt($("#currentExp").val());
    $(".tab").on("click",function(){
        $(".tab").removeClass("active");
        $(this).addClass("active");
    })
    function runExperience(currExper, total, elemWidth) {
        var o_stye = ((currExper / total) * elemWidth);
        var o_value = 0;
        var o = document.getElementById("experience");
        var run = setInterval(function() {
            o.style.width = o_value + "px";
            o_value += 1;
            if (o_value >= o_stye) {
                clearInterval(run);
            }
        }, 5);
    }
    runExperience(currentExp,nexLvExp,200);
});
 

</script>
</body>
</html>